/* 亮色主题 */
:root {
  /* 主背景色 */
  --el-bg-color: #ffffff;
  --el-page-bg: #f0f2f5;
  --el-component-bg: #ffffff;

  /* 文字颜色 */
  --el-text-color-primary: #303133;
  --el-text-color-regular: #606266;
  --el-text-color-secondary: #909399;

  /* 边框颜色 */
  --el-border-color: #dcdfe6;
  --el-border-color-light: #e4e7ed;

  /* 菜单相关 */
  --el-menu-bg-color: #545c64;
  --el-menu-text-color: #ffffff;
  --el-menu-active-color: #ffd04b;
  --el-menu-hover-bg-color: #263445;

  --svg-filter: brightness(0) saturate(100%);  /* 黑色 */
}

/* 暗色主题 */
.dark {
  /* 主背景色 */
  --el-bg-color: #141414;
  --el-page-bg: #0a0a0a;
  --el-component-bg: #1f1f1f;

  /* 文字颜色 */
  --el-text-color-primary: #ffffff;
  --el-text-color-regular: #d1d1d1;
  --el-text-color-secondary: #a3a6ad;

  /* 边框颜色 */
  --el-border-color: #363636;
  --el-border-color-light: #434343;

  /* 菜单相关 */
  --el-menu-bg-color: #141414;
  --el-menu-text-color: #ffffff;
  --el-menu-active-color: #1890ff;
  --el-menu-hover-bg-color: #1f1f1f;

  /* 其他覆盖 */
  --el-fill-color-blank: var(--el-bg-color);
  --el-bg-color-overlay: var(--el-component-bg);
  --el-mask-color: rgba(0, 0, 0, 0.8);

  --svg-filter: brightness(0) saturate(100%) invert(100%);  /* 白色 */
}

/* 全局容器样式 */
body {
  background-color: var(--el-page-bg);
  color: var(--el-text-color-primary);
}

.el-container {
  background-color: var(--el-page-bg);
}

.el-main {
  background-color: var(--el-page-bg);
  color: var(--el-text-color-primary);
}

.el-header {
  background-color: var(--el-component-bg);
  border-bottom: 1px solid var(--el-border-color-light);
  color: var(--el-text-color-primary);
}

/* 亮色主题菜单 */
.el-menu {
  --el-menu-bg-color: #545c64 !important;
  --el-menu-text-color: #ffffff !important;
  --el-menu-hover-text-color: #ffd04b !important;
  --el-menu-active-text-color: #ffd04b !important;
  --el-menu-hover-bg-color: #263445 !important;
  background-color: var(--el-menu-bg-color) !important;
}

/* 暗色主题菜单 */
.dark .el-menu,
.dark-menu {
  --el-menu-bg-color: #141414 !important;
  --el-menu-text-color: #ffffff !important;
  --el-menu-hover-text-color: #1890ff !important;
  --el-menu-active-text-color: #1890ff !important;
  --el-menu-hover-bg-color: #1f1f1f !important;
  background-color: var(--el-menu-bg-color) !important;
}

/* 菜单项样式 */
.el-menu-item,
.el-sub-menu__title {
  color: var(--el-menu-text-color) !important;
  background-color: var(--el-menu-bg-color) !important;
}

.el-menu-item:hover,
.el-sub-menu__title:hover {
  color: var(--el-menu-hover-text-color) !important;
  background-color: var(--el-menu-hover-bg-color) !important;
}

.el-menu-item.is-active {
  color: var(--el-menu-active-text-color) !important;
  background-color: var(--el-menu-hover-bg-color) !important;
}

/* 子菜单样式 */
.el-sub-menu .el-menu {
  background-color: var(--el-menu-bg-color) !important;
}

/* 确保aside背景色跟随菜单 */
.el-aside {
  background-color: var(--el-menu-bg-color) !important;
  border-right: 1px solid var(--el-border-color);
  transition: all 0.3s ease;
}

/* 添加过渡效果 */
.el-menu,
.el-menu-item,
.el-sub-menu__title,
.el-aside {
  transition: all 0.3s ease !important;
}

/* 暗色模式下的特殊样式 */
.dark .el-main,
.dark .el-header {
  background-color: var(--el-bg-color);
  color: var(--el-text-color-primary);
}

.dark .el-card {
  background-color: var(--el-bg-color);
  border-color: var(--el-border-color);
  color: var(--el-text-color-primary);
}

.dark .el-table {
  background-color: var(--el-bg-color);
  color: var(--el-text-color-primary);
}

.dark .el-table th,
.dark .el-table tr {
  background-color: var(--el-bg-color);
  color: var(--el-text-color-primary);
}

/* 表格样式 */
.el-table {
  --el-table-header-bg-color: var(--el-component-bg);
  --el-table-row-hover-bg-color: var(--el-page-bg);
  background-color: var(--el-component-bg);
  color: var(--el-text-color-primary);
}

.el-table th.el-table__cell,
.el-table tr {
  background-color: var(--el-component-bg);
  color: var(--el-text-color-primary);
}

/* 表单样式 */
.el-form-item__label {
  color: var(--el-text-color-regular);
}

.el-input__wrapper,
.el-textarea__wrapper {
  background-color: var(--el-component-bg) !important;
}

.el-input__inner,
.el-textarea__inner {
  color: var(--el-text-color-primary) !important;
}

/* 按钮样式 */
.el-button {
  background-color: var(--el-component-bg);
  border-color: var(--el-border-color);
  color: var(--el-text-color-regular);
}

/* 卡片样式 */
.el-card {
  background-color: var(--el-component-bg);
  border-color: var(--el-border-color);
  color: var(--el-text-color-primary);
}

/* 下拉菜单样式 */
.el-dropdown-menu {
  background-color: var(--el-component-bg);
  border-color: var(--el-border-color);
}

.el-dropdown-menu__item {
  color: var(--el-text-color-regular);
}

.el-dropdown-menu__item:hover {
  background-color: var(--el-page-bg);
  color: var(--el-text-color-primary);
}

/* 弹窗样式 */
.el-dialog {
  background-color: var(--el-component-bg);
}

.el-dialog__title {
  color: var(--el-text-color-primary);
}

/* 分页样式 */
.el-pagination {
  --el-pagination-button-bg-color: var(--el-component-bg);
  --el-pagination-hover-color: var(--el-menu-active-color);
  color: var(--el-text-color-regular);
}

/* 标签页样式 */
.el-tabs__item {
  color: var(--el-text-color-regular);
}

.el-tabs__item.is-active {
  color: var(--el-menu-active-color);
}

/* 抽屉样式 */
.el-drawer {
  background-color: var(--el-component-bg);
}

.el-drawer__header {
  color: var(--el-text-color-primary);
}

/* 添加过渡效果 */
/** {*/
/*  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;*/
/*}*/

/* 暗色主题侧边栏 */
.dark .el-aside {
  background-color: var(--el-menu-bg-color) !important;
  border-right-color: var(--el-border-color);
}

.menu-asidebar{
  background-color: var(--el-menu-bg-color) !important;
}

/* 亮色主题下的表格悬停 */
:root .el-table {
  --el-table-row-hover-bg-color: var(--el-page-bg);
}

/* 暗色主题下的表格悬停 */
.dark .el-table {
  --el-table-row-hover-bg-color: #1d1d1d;
}
